<template>
    <div class="my-custiom">
        <div class="my-custiom-content">
            <div class="my-custiom-title">
                今日登录用户
            </div>
            <div class="my-custiom-content-text">
                <div v-for="(user, index) in users" :key="index">{{ user.name }}</div>
            </div>
        </div>

    </div>
</template>

<script lang="ts">
// 定义组件
import { Component, Vue, Prop } from 'vue-property-decorator';
import Api from '../../api/api';
@Component
export default class TestPage extends Vue {
    @Prop({ type: String, default: '' })
    userId!: string;

    @Prop({ type: Array || null, default: null })
    roleIds!: any[] | null;

    @Prop({ type: Array || null, default: null })
    roleName!: any[] | null;

    @Prop({ type: String, default: '' })
    phone!: string;

    @Prop({ type: String, default: '' })
    email!: string;

    @Prop({ type: String, default: '' })
    deptName!: string;

    @Prop({ type: String, default: '' })
    deptId!: string;

    users: any = []; // 定义一个数组存储用户数据
    replayToken: any = ''

    async created() {
        await this.fetchReplayToken();
        await this.fetchUsers();
    }

    async fetchReplayToken() {
        this.replayToken = await Api.exportReplayToken()
        // console.log('this.replayToken', this.replayToken);

    }
    async fetchUsers() {
        // const response = await Api.getUsers(); // 假设有一个接口获取用户数据
        // this.users = response.data || []; // 将接口返回的数据赋值给 users
        this.users =[
            {
                name: '张三',
                id:1,
            },
            {
                name: '李四',
                id:2,
            },
            {
                name: '王五',
                id:3,
            },
            {
                name: '赵六',
                id:4,
            },
            {
                name: '孙七',
                id:5,
            },
            {
                name: '周八',
                id:6,
            },
            {
                name: '陈玖',
                id:7,
            },
            {
                name: '胡石',
                id:8,
            },
            {
                name: '啥的',
                id:9,
            },
            {
                name: '公告石',
                id:10,
            },
        ]
    }
}
  
  

</script>

<style lang="less" scoped>
.my-custiom {
    height: 100%;
    width: 100%;


}

.my-custiom-content {
    padding: 20px;
    height: 100%;
    position: relative;
    background-color: #fff;
}

.my-custiom-title {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 16px;
    color: black;
    position: relative;
    /* 确保伪元素相对于该容器定位 */

}

.my-custiom-content-text {
    display: flex;
    flex-direction: row; /* 行布局 */
    flex-wrap: wrap; /* 允许换行 */
    max-height: 200px; /* 设置最大高度 */
    overflow-y: auto; /* 启用垂直滚动条 */
    overflow-x: hidden; /* 禁止水平滚动 */
    gap: 10px; /* 子项之间的间距 */
}

.my-custiom-content-text > div {
    flex: 1 1 calc(50% - 10px); /* 每个子项占据一半宽度，减去间距 */
    margin: 0; /* 移除额外的外边距 */
    text-align: center; /* 文本居中 */
    background-color: #eef7ff;
    border: 1px solid #d1e9ff;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    min-width: 0; /* 防止子项宽度被压缩到小于零 */
}
</style>